<template>
	<view class="">

		<view style="position: absolute; width: 60vw; height: 90rpx; margin: 80rpx 160rpx;">
			<image style="width: 100%; height: 100%;" :src="headline" alt="" /></image>
		</view>

		<view class="content">
			<view style="padding-top: 250rpx;">
				<view class="shipin">
					<view style="margin-bottom: 50rpx; text-align: center; font-size: 38rpx; font-weight: bold;">
						{{title}}
					</view>
					<view style="margin-top: 50rpx;">
						<u-parse :content="richText" :imageProp='imageProp' @preview="preview" @navigate="navigate"
							className="html_content" />
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				id: null,
				title: null,
				richText: '',
				video_url: null,
				imageProp: {
					mode: 'widthFix',
					padding: 0,
					lazyLoad: false,
					window: '100%'
				},
				headline: null,
				exercise: '../../../../static/activity/health/exercise.png',
				health: '../../../../static/activity/health/health.png',
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.title = opt.title
			this.richText = opt.content
			this.video_url = opt.video_url
			console.log(this.richText);
			if (opt.id == '140') {
				this.headline = this.exercise
			} else if (opt.id == '141') {
				this.headline = this.health
			}
		},
		methods: {
			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			}
		}
	}
</script>

<style>
	@import url("/components/gaoyia-parse/parse.css");

	.content {
		width: 100vw;
		height: 95vh;
		background: linear-gradient(to bottom, #D4EAA4, #B8DE69);
		padding-bottom: 80rpx;
	}

	.shipin {
		width: 77vw;
		margin: 0 auto;
		height: 73vh;
		max-height: 73vh;
		overflow: auto;
		padding: 40rpx;
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 20rpx;
	}

	.shipin>video {
		width: 100%;
	}
</style>